<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/style_zj.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div id="header_01_html">
    <iframe id="header_01" src="head_01.html" frameborder="0"></iframe>
</div>
<div id="head_search_html">
    <iframe id="head_search" src="head_search.html" frameborder="0"></iframe>
</div>
<div class="body-cont order-detail" v-cloak>
    <!--公用状态-->
    <div class="status-comm p-r">
        <div class="item">
            <div class="text-status">提交订单</div>
            <div class="border-sty1 order-status" ></div>
            <div class="h-sty"><div class="status-time">{{list.crtTime}}</div></div>
            <span class="statu-y order-status"></span>
        </div>
        <div class="item">
            <div class="text-status">待付款</div>
            <div class="border-sty1 color-e5e5" :class="list.state == 2?'order-status':''"></div>
            <div class="h-sty"><div class="status-time"></div></div>
            <span class="statu-y color-e5e5" :class="list.state == 2?'order-status':''"></span>
        </div>
        <div class="item">
            <div class="text-status">交易成功</div>
            <div class="border-sty1 color-e5e5" :class="list.state == 4?'order-status':''"></div>
            <div class="h-sty"><div class="status-time"></div></div>
            <span class="statu-y color-e5e5" :class="list.state == 4?'order-status':''"></span>
            <span class="statu-y left-226 color-e5e5" :class="list.state == 6?'order-status':''"></span>
        </div>
        <div class="item status-f">
            <div class="text-status">已评价</div>
        </div>
    </div>
    <div class="detail-cont">
        <div class="text-1">订单号:<span>{{list.id}}</span></div>
        <!--状态6-->
        <!--<div class="text-1" v-if="list.state == 1">当前订单状态：<span class="col-f52">待付款</span>请及时付款 <span class="col-f52">14</span>天<span class="col-f52">23</span>小时<span class="col-f52">59</span>分<span class="col-f52">00</span>秒后，系统将关闭交易</div>-->
        <div class="text-1" v-if="list.state == 1">当前订单状态：<span class="col-f52">待付款</span>{{bos!='boss'?'请及时付款':''}}</div>
        <div class="text-1" v-if="list.state == 2">当前订单状态：<span class="col-f52">待发货</span>{{bos!='boss'?'请耐心等待商家发货':'请及时发货'}} </div>
        <div class="text-1" v-if="list.state == 3">当前订单状态：<span class="col-f52">待确认收货</span>{{bos!='boss'?'请及时确认收货':'请耐心等待买家确认收货'}}</div>
        <div class="text-1" v-if="list.state == 4">当前订单状态：<span class="col-f52">交易成功</span>{{bos!='boss'?'请及时付款':''}}</div>
        <div class="text-1" v-if="list.state == 5">当前订单状态：<span class="col-f52">交易关闭</span></div>
        <div class="text-1" v-if="list.state == 6">当前订单状态：<span class="col-f52">已评价</span></div>


        <div class="text-1" v-if="bos!='boss'">1.付款前请务必于卖家确认好订单金额，运费和货品！</div>
        <div class="text-1" v-if="list.state == 1 && bos!='boss'">2.订单已确认，请点击这里<span class="btn-sty1 cur-p">立即付款</span></div>
        <!--<div class="text-1">3.如果您不想购买，可以<span class="col-blu1">关闭交易</span></div>-->
        <div class="text-1">客户备注：{{list.remark}}</div>
    </div>
    <div class="toggle-ow">
        <div class="btn active-b js-toggle">订单详情<div class="act"><span class="sj"></span></div></div>
        <!--<div class="btn js-toggle">物流信息<div class="act"><span class="sj"></span></div></div>-->
    </div>
    <div class="detail-listC">
        <div class="detail-list marr-485">
            <div class="li li-1">买家信息</div>
            <div class="li"><span>收货人：</span><span>{{list.name}}</span></div>
            <div class="li"><span>收货地址：</span><span>{{list.address}}</span></div>
            <div class="li"><span>手机：</span><span>{{list.phone}}</span></div>
        </div>
        <div class="detail-list">
            <div class="li li-1">卖家信息</div>
            <div class="li"><span>店铺名称：</span><span class="col-blu1">{{list.storeName}}</span></div>
            <div class="li"><span>客服QQ：</span><a class="ml-20" target="_blank" :href="'http://wpa.qq.com/msgrd?v=3&uin='+qq+'&site=qq&menu=yes'">
                <img src="../img/QQ.png" class="qq-box1" align="absmiddle">
            </a></div>
            <div class="li"><span>手机：</span><span>{{list.zslStore?list.zslStore.phone:''}}</span></div>
        </div>
    </div>
    <div class="table-foot pb_50">
        <table>
            <thead>
                <tr>
                    <th>货品</th>
                    <th>单价(元)</th>
                    <th>数量</th>
                    <th>总价</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list.commodties">
                    <td class="text-l">
                        <div class="img-p">
                            <img v-for="(it,index) in item.picUrl" v-if="index == 0" :src="imgBaseUrl + it" alt="">
                        </div>
                        <p>{{item.commodityName}}</p>
                    </td>
                    <td class="td-w">¥{{item.retailPrice}}</td>
                    <td class="td-w">{{item.count}}</td>
                    <td class="td-w">
                        <div class="col-red1">¥{{item.totalPrice}}</div>
                        <!--<div>(含运费100)</div>-->
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="tabRight">
    <div class="first">
        <ul>
            <li><a target="_blank" class="icon_admin_white" title=""></a></li>
            <li>
                <a target="_blank" class="go-shopcard">
                    <i class="icon_shopcar_white"></i>
                    <p class="mt10">购<br>物<br>车</p>
                    <span class="car-num pos-Sty1">0</span>
                </a>
            </li>
            <li>
                <a target="_blank" class="icon_list_white mt10 go-myorder" title="订单"></a>
                <a target="_blank" class="icon_collect_white mt10 go-myhas" title="收藏"></a>
                <a target="_blank" class="icon_history_white mt10 go-record" title="记录"></a>
            </li>
        </ul>
    </div>
    <div class="second">
        <a target="_blank" class="icon_edit_white"></a>
        <a target="_blank" class="icon_top_white mt10"></a>
    </div>
</div>
<script src="../js/config.js"></script>
<script>
    var id = getUrlParam('id');
    var app = new Vue({
        el:'.order-detail',
        data:{
            list:[],
            qq:'',
            bos:getUrlParam('boss'),
            imgBaseUrl:imgBaseUrl,
        },
        mounted:function () {
            get_ajax("/sys/order/getMyInfo",{id:id},function (data) {
                data.commodties.forEach(function (items) {
                    items.picUrl = items.picUrl.split(",");
                })
                app.list = data;
                console.log(app.list.zslStore.qq);
                app.qq = app.list.zslStore.qq;
            })
        }

    })


//    $(document).on('click','.js-toggle',function(){
//        $(this).addClass('active-b').siblings().removeClass('active-b');
//    })
    $(document).on('click','.btn-sty1',function(){
        window.open('pay.html?id='+app.list.id);
    })
</script>
</body>
</html>